<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能页面索引 - 家庭工具管理App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#16a34a', // 绿色主题，代表工具和实用性
                        secondary: '#4ade80', // 浅绿色辅助色
                        dark: '#1e293b',
                        light: '#f8fafc',
                        success: '#22c55e',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #f3f4f6;
        }
        .app-card {
            transition: all 0.3s ease;
        }
        .app-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body class="min-h-screen p-4">
    <!-- 页面标题 -->
    <div class="text-center mb-8 mt-4">
        <h1 class="text-3xl font-bold text-dark">功能页面索引</h1>
        <p class="text-gray-500 mt-2">所有功能页面快捷入口</p>
    </div>

    <!-- 页面网格布局 -->
    <div class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 主页 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-home text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">主页</h3>
                <p class="text-gray-500 text-sm mt-1">工具概览和快捷操作</p>
                <a href="home.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 工具列表 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-wrench text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">工具列表</h3>
                <p class="text-gray-500 text-sm mt-1">所有工具的分类浏览</p>
                <a href="tools.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 工具详情 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-info-circle text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">工具详情</h3>
                <p class="text-gray-500 text-sm mt-1">查看单个工具的详细信息</p>
                <a href="tool_detail.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 添加工具 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-plus-circle text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">添加工具</h3>
                <p class="text-gray-500 text-sm mt-1">录入新工具的详细信息</p>
                <a href="add_tool.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 统计页面 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-bar-chart text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">统计分析</h3>
                <p class="text-gray-500 text-sm mt-1">工具使用数据可视化</p>
                <a href="statistics.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 设置页面 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-cog text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">应用设置</h3>
                <p class="text-gray-500 text-sm mt-1">数据管理和应用配置</p>
                <a href="settings.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 位置管理 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-map-marker text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">位置管理</h3>
                <p class="text-gray-500 text-sm mt-1">管理工具存放位置</p>
                <a href="location_manager.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 借用记录 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-hand-lizard-o text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">借用记录</h3>
                <p class="text-gray-500 text-sm mt-1">工具借用与归还管理</p>
                <a href="borrow_records.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 保养管理 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-calendar-check-o text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">保养管理</h3>
                <p class="text-gray-500 text-sm mt-1">工具保养计划与记录</p>
                <a href="maintenance.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>

        <!-- 耗材管理 -->
        <div class="app-card bg-white rounded-xl shadow-md overflow-hidden">
            <div class="h-48 bg-primary/10 flex items-center justify-center">
                <i class="fa fa-cubes text-6xl text-primary/80"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-lg text-dark">耗材管理</h3>
                <p class="text-gray-500 text-sm mt-1">工具相关耗材库存管理</p>
                <a href="consumables.html" target="_blank" class="block w-full text-center py-2 mt-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    打开页面
                </a>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="text-center mt-12 mb-6 text-gray-500 text-sm">
        <p>家庭工具管理App © 2023 - 所有页面预览</p>
    </div>

    <script>
        // 页面加载时的动画效果
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.app-card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 100 * index);
            });
        });
    </script>
</body>
</html>